/* -- Theme styles 
   --------------------*/
body {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
}

body .theme {
color: #3E424B !important;
}

body .color.highlight {
	color: #f1c40f !important;
}
body a.color.highlight:hover {
	color: #f19f0f !important;
}

a:link {
	-webkit-transition: color 400ms linear;
	-moz-transition: color 400ms linear;
	-ms-transition: color 400ms linear;
	-o-transition: color 400ms linear;
	transition: color 400ms linear;
}

a:hover,
a:hover, 
a:focus {
	color: #f1c40f;
	text-decoration: none;
}

.padding {
padding: 1em;
}

.white {
	color: white;
}

.text-shadow {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.text-shadow-thin {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.uppercase {
	text-transform: uppercase;
}

.title {
	text-transform: uppercase;
}

.bold {
	font-weight: 700;
}

.margin-bottom {
	margin-bottom: 1em;
}

.margin-top {
	margin-top: 1em;
}

.margin-left {
	margin-left: 1em;
}

.margin-right {
	margin-right: 1em;
}

body > section.padding {
	padding: 6em 0;
}

body > section.padding-mini {
	padding: 4em 0;
}

body .bck.color {
	background-color: #3E424B;
}

body .bck.dark {
	background-color: #2C2F35;
}

body .bck.color, body .bck.dark {
	color: #c4d2df;
}

.scrollup{
  width:40px;
  height:40px;
  position:fixed;
  bottom: 15px;
  right: 15px;
  display:none;
  text-indent:-9999px;
  background: url('../img/icon_top.png') no-repeat;
  z-index: 9999;
}

button, .button {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

button:after,
.button:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Pseudo elements for icons */
button:before,
.button:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.button-2 {
	background: #3E424B;
	color: #fff;
	box-shadow: 0 6px #272c37;
	border-radius: 5px;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

.button-2:hover {
	box-shadow: 0 4px #272c37;
	top: 2px;
}

.button-2:active {
	box-shadow: 0 0 #ab3c3c;
	top: 6px;
}

.button-3 {
	border-radius: 50px;
	border: 3px solid #fff;
	color: #fff;
	overflow: hidden;
}

.button-3:active {
	border-color: #272c37;
	color: white;
}

.button-3:hover {
	background: #3E424B;
}

.button-3:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3.5;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.button-3:active:before {
	color: #272c37;
}

/* Button 4a */
.button-3:before {
	left: 84%;
	top: -100%;
}

.button-3:hover:before {
	top: -9px;
}

.get-started {
	font-size:1.5em;
	font-weight: 300;
	width: 220px;
	margin: 0;
}

/* Preloader */

#preloader .bokeh {
	font-size: 100px;
    width: 1em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.1);
    list-style: none;
    }

#preloader .bokeh li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}

#preloader .bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}

#preloader .bokeh li:nth-child(2) {
    top: 50%; 
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}

#preloader .bokeh li:nth-child(3) {
    left: 50%; 
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
}

#preloader .bokeh li:nth-child(4) {
    top: 50%; 
    left 0;
    margin: -.1em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
}

@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

@-webkit-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-moz-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-ms-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-o-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

.ie7 .bokeh,
.ie8 .bokeh,
.ie9 .bokeh {
	display: none;
}

/* -- Background styles 
   --------------------*/

section#home {
	display: block;
	background: #3cc7b4 url('../img/bg-featured2.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	min-height: 100%;
	-moz-box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, .50), inset 0 -5px 5px -5px rgba(0, 0, 0, .50);  
	-webkit-box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, .50), inset 0 -5px 5px -5px rgba(0, 0, 0, .50);  
	box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, .50), inset 0 -5px 5px -5px rgba(0, 0, 0, .50);  
}

section#about {
	display: block;
	background-color: #3E424B;
	border-top: 1px solid #2C2F35;
	border-bottom: 1px solid #2C2F35;
	color: white;
}

section.featured {
	background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e9e9e9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-8 */

	border-bottom: 1px solid #e7e7e7;
}

section#projects, section#team {
	background-color: #3E424B;
	border-top: 1px solid #2C2F35;
	border-bottom: 1px solid #2C2F35; 
}

section#testimonials {
	background: #3cc7b4 url('../img/office5.jpg') no-repeat center center fixed; 
	min-height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	-moz-box-shadow: inset 0 7px 5px -5px rgba(0, 0, 0, .50), inset 0 -7px 5px -5px rgba(0, 0, 0, .50);
	-webkit-box-shadow: inset 0 7px 5px -5px rgba(0, 0, 0, .50), inset 0 -7px 5px -5px rgba(0, 0, 0, .50);
	box-shadow: inset 0 7px 5px -5px rgba(0, 0, 0, .50), inset 0 -7px 5px -5px rgba(0, 0, 0, .50);
}

section#contact {
	position: relative;
	padding: 11.2em 0;
}


/* --  Hover Transitions 
   --------------------*/
.viewport {

    overflow: hidden;
    position: relative;

}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
    display: block;
    position: relative;
}

/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
    display: none;
    font-size: 1.5em;
    font-weight: bold;
    height: 100%;
    padding-top: 90px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
    -webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
}
  .viewport a span em {
      display: block;
      font-size: 0.7em;
      font-weight: normal;
      margin-top: 10px;
  }

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
		background: url('../img/bg-overlay.png');
    background: rgba(44, 47, 53, 0.6);
    color: #fff;
    text-shadow: #000 0px 0px 20px;
}
.dark-background em {
    color: #ccc;
}



/* -- Animation styles 
   --------------------*/


/* Icon Rotator */
.hi-icon {
	display: inline-block;
	font-size: 0px;
	margin: 15px 30px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}

.ie8 .hi-icon {
	background: none;
	margin-right: 0;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.hi-icon:before {
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.icomoon-effect .hi-icon {
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.icomoon-effect .hi-icon:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	-moz-transition: -moz-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}

.icomoon-animate .hi-icon {
	color: #fff;
}

.no-touch .icomoon-animate .hi-icon:hover {
	color: #3E424B;
	text-shadow: none;
}

.icomoon-animate .hi-icon:after {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}

.no-touch .icomoon-animate .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.ie8 .hi-icon,
.ie8 .hi-icon:after {
	background: none !important;
	margin-right: 0;
}

.ie8 .icomoon-animate .hi-icon:hover {
	color: white !important;
}

.ie8 .icomoon-animate .hi-icon:after {
	opacity: 1;
}


/* -- Ellipsis animation -- */

.one {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.0s;
}

.two {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.1s;
}

.three {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.15s;
}

@-webkit-keyframes dot {
    0% { opacity: 1; }
   50% { opacity: 0.5; }
  100% { opacity: 0; }
}




.tip1 {
  left: 15%;
  opacity: 0;
  z-index: 50;
}

.animate-in .tip1 {
  top: 77%;
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 1.5s;
  -moz-transition-delay: 1.5s;
  -ms-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;
}

.animate-out .tip1 {
  opacity: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.tip2 {
  left: 80%;
  opacity: 0;
  z-index: 50;
}

.animate-in .tip2 {
  top: 72%;
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}

.animate-out .tip2 {
  opacity: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.tip3 {
  left: 90%;
  opacity: 0;
  z-index: 50;
}

.animate-in .tip3 {
  top: 86%;
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 2.5s;
  -moz-transition-delay: 2.5s;
  -ms-transition-delay: 2.5s;
  -o-transition-delay: 2.5s;
  transition-delay: 2.5s;
}

.animate-out .tip3 {
  opacity: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}


/* -- Button styles 
   --------------------*/



/* -- Header styles 
   --------------------*/

header {
	height: 100px;
    width:100%;
    position:fixed;
    left:0px;
    top:0px;
    z-index: 900;
    
	background-color: #2C2F35;
    -webkit-transition: right 0.333s ease, -webkit-transform 0.333s ease, opacity 0.333s ease, visibility 0.333s ease, background-color 0.333s ease;
	-moz-transition: right 0.333s ease, -moz-transform 0.333s ease, opacity 0.333s ease, visibility 0.333s ease, background-color 0.333s ease;
	-o-transition: right 0.333s ease, -o-transform 0.333s ease, opacity 0.333s ease, visibility 0.333s ease, background-color 0.333s ease;
	transition: right 0.333s ease, transform 0.333s ease, opacity 0.333s ease, visibility 0.333s ease, background-color 0.333s ease;
}

header.transparent {
	background: rgba(0, 0, 0, 0);
}

body > header .logo {
    margin-top: 1.5em;
}

header nav {
	text-align: center;
}

header .nav-collapse {
	float: right;
}

#home {
	height: 700px;
	position: relative;
}

#home .hero-content {
	height: 400px;
	position: relative;
	top: 200px;
}

#home .hero-content h1 {
	color: white;
	font-weight: 300;
	font-size: 3.5em;
	position: relative;
	margin-top: 0;
	margin-bottom: 0.1em;
	line-height: 1.5em;
}

#home .hero-content p {
	font-size: 2em;
	font-weight: 300;
	color: white;
}



/* general style for the form */
.nl-form {
	width: 60%;
	margin: 0.3em auto 0 auto;
	font-size: 1em;
	font-weight: 300;
	line-height: 1.5;
	position: relative;
}

.nl-form ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* normalize the input elements, make them look like everything else */
.nl-form input, .nl-form select {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	color: #f1c40f;
	font-weight: inherit;
	line-height: inherit;
	display: inline-block;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.nl-form input:focus {
	outline: none;
}

/* custom field (drop-down, text element) styling  */
.nl-field {
	display: inline-block;
	position: relative;
}

.nl-field.nl-field-open {
	z-index: 10000;
}

/* the toggle is the visible part in the form */
.nl-field-toggle, .nl-form input, .nl-form select {
	line-height: inherit;
	display: inline-block;
	color: #f1c40f;
	cursor: pointer;
	border-bottom: 1px dashed #f1c40f;
	font-size: 3.3em;
}

.nl-form a:hover {
	text-decoration: none;
}

/* drop-down list / text element */
.nl-field ul {
	position: absolute;
	visibility: hidden;
	background: #76C3BD;
	left: -7em;
	top: 50%;
	font-size: 80%;
	opacity: 0;
	-webkit-transform: translateY(-40%) scale(0.9);
	-moz-transform: translateY(-40%) scale(0.9);
	transform: translateY(-40%) scale(0.9);
	-webkit-transition: visibility 0s 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: visibility 0s 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;
}

.nl-field.nl-field-open ul {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(-50%) scale(1);
	-moz-transform: translateY(-50%) scale(1);
	transform: translateY(-50%) scale(1);
	-webkit-transition: visibility 0s 0s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: visibility 0s 0s, opacity 0.3s, -moz-transform 0.3s;
	transition: visibility 0s 0s, opacity 0.3s, transform 0.3s;
}

.nl-field ul li {
	color: #fff;
	position: relative;
}

.nl-dd ul li {
	padding: 0.6em;
	cursor: pointer;
	white-space: nowrap;
	text-align: left;
	font-size: 3.3em;
}

.nl-dd ul li.nl-dd-checked {
	background: rgba(0,0,0,0.05);
	color: #478982;
}

.no-touch .nl-dd ul li:hover {
	background: rgba(0,0,0,0.05);
}

.no-touch .nl-dd ul li:hover:active {
	color: #478982;
}

/* icons for some elements */
.nl-dd ul li.nl-dd-checked:before,
.nl-field-go:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.nl-dd ul li.nl-dd-checked:before {
	content: "\e267";
	position: absolute;
	right: 1em;
	font-size: 50%;
	line-height: 1;
}

.nl-ti-text ul {
	min-width: 8em;
}

.nl-ti-text ul li.nl-ti-input input {
	width: 100%;
	padding: 0.2em 2em 0.2em 0.5em;
	border-bottom: none;
	color: #fff;
}

.nl-form .nl-field-go {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	cursor: pointer;
	background: rgba(0,0,0,0.1);
	width: 1.8em;
	text-align: center;
	color: transparent;
}

.nl-field-go:before {
	content: "\e267";
	font-size: 75%;
	color: #fff;
	width: 100%;
	line-height: 2.5;
	display: block;
}

/* custom placeholder color */
input::-webkit-input-placeholder {
	color: rgba(255,255,255,0.8);
}

input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
	color: rgba(255,255,255,0.2);
}

input::-moz-placeholder {
	color: rgba(255,255,255,0.8);
}

input:active::-moz-placeholder,
input:focus::-moz-placeholder {
	color: rgba(255,255,255,0.2);
}

input:-ms-input-placeholder {  
	color: rgba(255,255,255,0.8);
}

input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
	color: rgba(255,255,255,0.2);
}

/* example field below text input */
.nl-ti-text ul li.nl-ti-example {
	font-size: 40%;
	font-style: italic;
	font-weight: 400;
	padding: 0.4em 1em;
	color: rgba(0,0,0,0.2);
	border-top: 1px dashed rgba(255,255,255,0.7);
}

.nl-ti-text ul li.nl-ti-example em {
	color: #fff
}

/* submit button */
.nl-submit-wrap {
	margin-top: 3.5em;
}

.nl-form .nl-submit {
	line-height: 3;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	color: #fff;
	padding: 0.1em 1.5em;
	font-size: 40%;
	font-weight: 300;
}


.no-touch .nl-form .nl-submit:hover,
.no-touch .nl-form .nl-submit:active {

}

.no-touch .nl-form .nl-submit::before {
	margin: 0;
}

.no-touch .nl-form .nl-submit:hover:before {
	content: '';
}

/* overlay becomes visible when a field is opened */
.nl-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	z-index: 9999;
	visibility: hidden;
	-webkit-transition: visibility 0s 0.3s, opacity 0.3s;
	-moz-transition: visibility 0s 0.3s, opacity 0.3s;
	transition: visibility 0s 0.3s, opacity 0.3s;
}

.nl-field.nl-field-open ~ .nl-overlay {
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
}

@media screen and (max-width: 45em) {
	.nl-form {
		font-size: 3em;
	}
}

@media screen and (max-width: 25em) {
	.nl-form {
		font-size: 2em;
	}
}

/* -- Navigation
------------------------ */

.navbar-inner {

  background-color: transparent;
  background-image: none;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}


#nav ul {
  float: right !important;
	
  margin: 1.5em 0;
  padding: 0;
  list-style: none;
  width: auto;
  -webkit-border-radius: 7px;  
  border-radius: 7px;
  background: rgba(255,255,255,0.1);
}

#nav li {
  display: block;
  float: left;
  width: 100%;
  width: auto;
  *width: 24.9%; /* IE7 Hack */ /* IE6 Hack */
}

#nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 17px;
  margin: 0;
  float: left;
  font-weight: 300;
  line-height: 45px;
	background: none;
	
  font-size: 1.2em;
	font-weight: 300;
}

#nav li a:hover {
	background: #212428;
	background: rgba(255,255,255,0.2) !important;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}

.current {
	background: rgba(255,255,255,0.2) !important;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}






/* -- About styles 
   --------------------*/

#about h1 {
	text-transform: uppercase;
	margin: 0 0 0.7em;
	font-weight: 400;
}

#about h2 {
	color: white;
	font-size: 2em;
	font-weight: 300;
	text-transform: none;
	margin: 0 0 2em;
}


#about h3 {
	margin: 0 0 0.5em;
	color: white;
	font-weight: 300;
}

#about p {
	line-height: 1.4em;
}



/* -- Featured Showcase Slider
   ---------------------------------- */

.featured p {
	margin: 1.5em 4em 2.5em;
}

/* Slider style */
.md-slider {
	width: 100%;
	position: relative;
	height: 100%;
	padding-top: 40px;
	margin: 10px auto;
}

.md-slider > nav {
	position: absolute;
	text-align: center;
	width: 100%;
	top: 0;
}

.md-slider > nav a {
	display: inline-block;
	width: 44px;
	height: 14px;
	background: #ddd;
	margin: 3px;
	border-radius: 2px;
	outline: none;
}

.touch .md-slider > nav a {
	width: 20px;
	height: 20px;
	margin: 2px 8px;
}

.md-slider > nav a:hover,
.md-slider > nav a.md-current {
	background: #aaa;
}

/* General style for all devices */
.md-device-wrapper {
	position: relative;
	text-align: center;
	width: 760px;
	margin: 0 auto;
}

.md-device {
	position: relative;
	display: inline-block;
	border-radius: 5px;
	background-color: #333;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}

.md-device > a,
.md-device > a img {
	display: block;
	outline: none;
}

.md-device > a {
	position: relative;
}

.md-device > a img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.md-device > a img.md-fadeout {
	opacity: 0;
}

/* reset box sizing for this demo */
/* we want the paddings to be added to our width/height */
.md-device,
.md-device div,
.md-device:before,
.md-device:after {
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

/* Common pseudo elements' properties */
/* md-device:before -- camera / top element */
/* md-device:after -- home button */
/* md-base-element:after -- socket of base */
/* md-border-element:after -- grey inset opending macbook */
.md-device:before,
.md-device:after,
.md-base-element:after,
.md-border-element:after {
	position: absolute;
	content: '';
	z-index: 1000;
	left: 50%;
	top: 0;
}

.md-device:before,
.md-device:after {
	background: #000;
}

.md-device:before {
	-webkit-transform: translateY(300%) translateX(-50%);
	-moz-transform: translateY(300%) translateX(-50%);
	-ms-transform: translateY(300%) translateX(-50%);
	transform: translateY(300%) translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

.md-device > div {
	position: absolute;
}

/* button for rotating a device */
.md-device button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	z-index: 1001;
	border: none;
	color: #fff;
	background: #101010;
	text-align: center;
	cursor: pointer;
	margin: -25px 0 0 -25px;
	opacity: 0;
	outline: none;
	font-size: 1em;
	padding: 0;
}

.md-device:hover button,
.touch .md-device button {
	opacity: 1;
}

.md-device button:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 30px;
	line-height: 50px;
	-webkit-font-smoothing: antialiased;
	content: "\e256";
}

.md-device.md-rotated button {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	transform: scaleX(-1);
}

/* Let's predefine some properties so that transitions happen smoothly */
.md-border-element,
.md-base-element,
.md-border-element:after {
	opacity: 0;
}

/* md-device:after -- home button (device 3 and 4) */
.md-device:after {
	width: 24px;
	height: 24px;
	top: 100%;
	border-radius: 50%;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: translateY(-200%) translateX(-50%) scale(0);
	-moz-transform: translateY(-200%) translateX(-50%) scale(0);
	-ms-transform: translateY(-200%) translateX(-50%) scale(0);
	transform: translateY(-200%) translateX(-50%) scale(0);
}

/* md-border-element -- border bottom iMac, keyboard/base macbook */
.md-border-element {
	height: 60px;
	border-radius: 0 0 5px 5px;
	top: 100%;
	width: 100%;
	background: #ddd;
	left: 50%;
}

/* md-border-element:after; -- grey inset opending macbook */
.md-border-element:after {
	background: #aaa;
	width: 100px;
	border-radius: 0 0 6px 6px;
	height: 10px;
	opacity: 0;
}

.md-border-element,
.md-border-element:after {
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* md-base-element -- base imac */
.md-base-element {
	top: 100%;
	left: 50%;
	width: 160px;
	height: 0;
	background: transparent;
	border-bottom: 60px solid #ddd;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	-webkit-transform: translateY(60px) translateX(-50%) translateY(-75%);
	-moz-transform: translateY(60px) translateX(-50%) translateY(-75%);
	-ms-transform: translateY(60px) translateX(-50%) translateY(-75%);
	transform: translateY(60px) translateX(-50%) translateY(-75%);
	z-index: -1;
}

/* md-base-element:after -- socket of base imac */
.md-base-element:after {
	background: #ddd;
	border-radius: 30px 30px 10px 10px;
	width: 260px;
	height: 12px;
	-webkit-transform: translateY(60px) translateX(-50%);
	-moz-transform: translateY(60px) translateX(-50%);
	-ms-transform: translateY(60px) translateX(-50%);
	transform: translateY(60px) translateX(-50%);
}

/* Device 1 (large monitor) */
.md-device-1 {
	padding: 30px;
	border-radius: 5px 5px 0 0;
}

.md-device-1 > a {
	width: 700px;
	height: 455px;
}

.md-device-1 .md-border-element {
	opacity: 1;
}

.md-device-1 .md-base-element {
	opacity: 1;
	-webkit-transform: translateY(60px) translateX(-50%) translateY(0);
	-moz-transform: translateY(60px) translateX(-50%) translateY(0);
	-ms-transform: translateY(60px) translateX(-50%) translateY(0);
	transform: translateY(60px) translateX(-50%) translateY(0);
}

/* Device 2 (laptop) */
.md-device-2 {
	padding: 30px;
	border-radius: 5px 5px 0 0;
}

.md-device-2 > a {
	width: 600px;
	height: 390px;
}

.md-device-2 .md-border-element {
	opacity: 1;
	width: 125%;
	height: 35px;
	background: #ddd;
	border-radius: 0 0 20px 20px;
}

.md-device-2 .md-border-element:after {
	opacity: 1;
}

/* Device 3 (tablet) */
.md-device-3 {
	padding: 55px 40px;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	transform: translateY(40px);
}

.md-device-3.md-rotated {
	-webkit-transform: translateY(40px) rotate(90deg);
	-moz-transform: translateY(40px) rotate(90deg);
	-ms-transform: translateY(40px) rotate(90deg);
	transform: translateY(40px) rotate(90deg);
}

.md-device-3 > a {
	width: 280px;
	height: 375px;
}

.md-device-3:before {
	-webkit-transform: translateY(600%) translateX(-50%);
	-moz-transform: translateY(600%) translateX(-50%);
	-ms-transform: translateY(600%) translateX(-50%);
	transform: translateY(600%) translateX(-50%);
}

.md-device-3:after {
	-webkit-transform: translateY(-175%) translateX(-50%) scale(1);
	-moz-transform: translateY(-175%) translateX(-50%) scale(1);
	-ms-transform: translateY(-175%) translateX(-50%) scale(1);
	transform: translateY(-175%) translateX(-50%) scale(1);
}

/* Device 4 (smartphone) */
.md-device-4 {
	padding: 50px 12px 70px;
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
}

.md-device-4.md-rotated {
	-webkit-transform: translateY(50px) rotate(90deg);
	-moz-transform: translateY(50px) rotate(90deg);
	-ms-transform: translateY(50px) rotate(90deg);
	transform: translateY(50px) rotate(90deg);
}

.md-device-4 > a {
	width: 200px;
	height: 299px;
}

.md-device-4:before {
	width: 20px;
	height: 4px;
	border-radius: 3px;
	-webkit-transform: translateY(600%) translateX(-50%);
	-moz-transform: translateY(600%) translateX(-50%);
	transform: translateY(600%) translateX(-50%);
}

.md-device-4:after {
	-webkit-transform: translateY(-200%) translateX(-50%) scale(1);
	-moz-transform: translateY(-200%) translateX(-50%) scale(1);
	transform: translateY(-200%) translateX(-50%) scale(1);
}

/* Transitions */
.md-device,
.md-device:before,
.md-border-element,
.md-device > a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-base-element,
.md-device:after,
.md-border-element:after {
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.md-device,
.md-device:before,
.md-border-element,
.md-device > a,
.md-base-element,
.md-device:after,
.md-border-element:after {
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.md-device > a img {
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
}

.md-device button {
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

@media screen and (max-width: 850px){
	
	.md-slider { 
		height: 400px;
	
}

	.md-device-wrapper {
		-webkit-transform: scale(0.5) translateX(-50%) translateY(10%);
		-moz-transform: scale(0.5) translateX(-50%) translateY(10%);
		-ms-transform: scale(0.5) translateX(-50%) translateY(10%);
		transform: scale(0.5) translateX(-50%) translateY(10%);
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		left: 50%;
	}

}


/* -- Portfolio styles 
   --------------------*/
.featured h2 {
	font-size: 2em;
	font-weight: normal;
}
.featured h3 {
	font-size: 1.4em;
	font-weight: normal;
	margin-top: 2em;
}
.featured .skills {
	width: 100%;
	padding: 0;
	margin: 0 0 3em;
	height: 100%;
}

.featured .skills li {
	font-size: 15px;
	list-style: none;
	float: left;
	width: 50%;
	margin: 5px 0;
}

.featured .button {
	margin-top: 2.5em;
}

.featured .icon {
	color: #3E424B;
}

#featured_1 > .row > .icon {
	font-size: 4em;
}


/* -- Team
   --------------------------*/

.ie9 #testimonials h2,
.ie8 #testimonials h2 {
	display: inline-block;
	background: #3E424B;
	padding: 5px 15px;
	-webkit-border-radius: 7px;
  border-radius: 7px;
}

#testimonials blockquote {
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

#testimonials blockquote p {
  padding-bottom: 15px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}



#team-member
{
	display: table;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#team-member > .user
{
	display: table;
	width: 100%;
	background-color: #2C2F35;
	padding: 15px;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#team-member > .user > .avatar
{
	display: table;
	float: left;
	border: 1px solid #181a1f;

	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	padding: 5px;
	background-color: white;
}
#team-member > .user > .avatar > img
{
	display: block;
	margin: 0 auto;

	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

#team-member > .user > .data
{
	float: right;
	color: white;
	font-size: 13px;
	margin-top: 10px;
	text-align: right;
}

#team-member > .user > .data > span.name
{
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 29px;
	margin-bottom: 7px;
	font-size: 22px;
}


#team-member > .details
{
	display: table;
	width: 100%;
	background-color: #fff;
	padding: 15px;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#team-member > .details > ul
{
	margin: 0 auto;
}

#team-member > .details > ul li
{
	list-style: none;
	width: 33%;
	border-right: 1px solid #fff;
	background-color: #f8f3f0;
	float: left;
	font-size: 8px;
	padding: 13px;
	text-align: center;
	color: #8d8070;
	text-transform: uppercase;
	overflow: hidden;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#team-member > .details > ul li:first-child
{
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

#team-member > .details > ul li:last-child
{
	border: 0;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}


#team-member > .details > ul li > span.number
{
	display: block;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

#team-member > .sm-links
{
	width: 100%;
	padding: 15px;
	background-color: #f8f3f0;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#team-member > .sm-links
{
	width: 100%;
	padding: 15px;
	background-color: #f8f3f0;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#team-member .sm-icon1 {
	font-size: 2em;
	color: #666;
	-webkit-transition: color 400ms linear;
	-moz-transition: color 400ms linear;
	-ms-transition: color 400ms linear;
	-o-transition: color 400ms linear;
	transition: color 400ms linear;
}

#team-member .sm-icon1:hover {
	color: #444;
}


/* -- Team Slider
   --------------------------*/

.teamslider {
	margin: 0;
}

.teamslider .slide {
	padding-bottom: 20px;
}


/* -- Contact
   --------------------------*/
#contact {
	position: relative;
	z-index: 5;
}

#contact .contact-overlay {
	width: 50%;
	margin: auto;
  /* For IE8 and earlier */;
  background: url('../img/bg-overlay.png');
	background: rgba(62, 66, 75, 0.5);     
	-pie-background: rgba(62, 66, 75, 0.5);     
	behavior: url(PIE.html);
	padding: 1em;
	-webkit-border-radius: 7px;  
	-moz-border-radius: 7px;  
	-ms-border-radius: 7px;  
	-o-border-radius: 7px;  
	border-radius: 7px;
}

#contact h1 {
	color: rgb(241, 196, 15);
	text-transform: uppercase;
	font-size: 2.5em;
	margin-top: 0;
}

#contact p {
	color: white;
	text-transform: uppercase;
	font-size: 1.2em;
	margin-top: 0;
}

#contact span {
	font-size: 1.5em;
	color: white;
}

#contact .contact-overlay br {
		display: none;
	}

#contact-form div {
	margin-bottom: 2em;
}

.contact-details p:before {
	padding-right: 15px;
}



/* -- Footer
   --------------------------*/

.bottom, footer, #about, #projects {
	background-image:url();
}

.bottom a, footer a {
	color: white;
}

.bottom a:hover {
	color: #f1c40f;
}

#footer-cta {
	text-align: center;
}

#footer-cta .bold {
		font-size: 1.5em;
		line-height: 2em;
		color: white;
}

footer nav a {
	margin-left: 25px;
	text-transform: uppercase;
}
.bottom p {
	line-height: 1.5em;
	margin-top: 1em;
}
.bottom .icon {
	font-size: 35px;
	float: left;
	margin: 0px 20px 50px 0px;
}


.mfp-container button,
.mfp-container .button {
	margin: 0;
}

.mfp-container .button-2 {
  padding: 10px 30px;
}



/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;        
  
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width; /* Safari/Chrome, other WebKit */       /* Firefox, other Gecko */            /* Opera/IE 8+ */;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}



#filters {
	list-style: none;
	margin: 0 auto 1em;
	width: 60%;
	padding: 10px;
	background-color: #2C2F35;
	-webkit-border-radius: 7px;          
	border-radius: 7px;
}

#filters li {
	display: inline;
	line-height: 200%;
}

#filters li a {
	padding: 0 1.2em;
	color: white;
}

#filters li a.selected, #filters li a:hover {
	color: rgb(241, 196, 15);
}

.element {
	-webkit-transition: all 1s ease !important;
	-moz-transition: all 1s ease !important;
	-o-transition: all 1s ease !important;   
	-ms-transition: all 1s ease !important;
	transition: all 1s ease !important;
  
}

.element:hover {

}

.element .item-style {
	background: white;
	border-collapse: separate;
	border-radius: 4px 4px 3px 3px;
	border: 1px solid #1d1f22;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	margin-bottom: 2em;
	padding: 10px;
}


/* -- gMap CSS
------------------------ */

#map_controls {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


/* -- Media Queries
   --------------------------*/

@media only screen and (max-width: 979px) {
  body {
    overflow-x: hidden; 
  }

  body > header .logo {
    margin-top: 1.5em !important;
  
    max-width: 147px !important;
  }

  #nav ul {
  	background: #2C2F35;
  	margin-top: 7px;
	}

  #nav li, #nav li a {
  	width: 100%;
  	padding: 0;
	}

	#nav li a {
		padding: 0 15px;
	}

  #nav li a:hover,
  #nav li a.current {
  	background: rgba(0, 0, 0, 0.1) !important;
  	border-radius: 0;
  	-webkit-border-radius: 0;
  }

  #about [class*="span"] {
  	margin-bottom: 2em;
  }

  .fs2 {
		font-size: 2em !important;
	}
}



@media only screen and (max-width: 767px) {
  body {
    padding-right: 0;
    padding-left: 0;
  }
	body > header .logo {
    width: 147px;
    min-width: 147px;
	}

	#home .hero-content h1 {
		color: white;
		font-weight: 300;
		font-size: 2.7em;
		position: relative;
		margin: 0 2em 0.1em;
	}

	.nl-form {
		font-size: 2.2em;
	}

	.nl-form {
		width:90%;
	}

	.nl-field ul {
		left: -2.7em;
	}

	.nl-field-toggle,
	.nl-dd ul li {
		font-size: 40px;
	}

	.get-started {
		font-size: 22px;
		padding: 20px 60px;
		margin: 0;
	}

	.get-started:hover {
		color: white;
	}

	.button-3:hover:before {
		top: -19px;
	}

	#about .columns {
		margin-bottom: 2em;
	}

	.featured {
		text-align: center;
	}

	.isotope-item {
	}

	.isotope-item img{
		width: 100%;
	}

	#team-member {
	}

	#contact .contact-overlay {
		width: 80%;
	}

	#contact .contact-overlay a {
		margin: 0;
	}

	#contact .contact-overlay br {
		display: block;
	}

	.fs2 {
		font-size: 3em !important;
		margin: 0;
	}

	#footer-cta [class*="span"] {
		margin-bottom: 3em;
	}

	footer [class*="span"] {
		margin: 20px 0;
		text-align: center !important;
	}

}

@media only screen and (max-width: 568px) {
	.isotope-item {
    width: 100%;
	}

	.isotope-item img {
		width: 100%;
	}

	#team-member {
	}

	#home {
		height: 550px;
	}

	#home .hero-content {
		height: 400px;
		position: relative;
		top: 100px;
	}

	#home .hero-content h1 {
		color: white;
		font-weight: 300;
		font-size: 2.2em;
		position: relative;
		margin-top: 0;
	
		line-height: 1.2em;
}

	.nl-form {
		width:90%;
	}

	.nl-field ul {
		left: -2.7em;
	}

	.nl-field-toggle,
	.nl-dd ul li {
		font-size: 31px;
	}

	.get-started {
		font-size: 22px;
		padding: 16px 32px;
		margin: 0;
	}

	.nl-submit-wrap {
		margin-top: 1em;
	}

	.button-3:before {
		left: 87%;
	}

	.button-3:hover:before {
		top: -22px;
	}

  .md-device-1 {
    width: 90%; 
  }

  .md-device-2 {
    width: 85%; 
  }

  .md-device-3 {
    width: 60%; 
  }

  .md-device-4 {
    width: 40%; 
  }

  .md-device-wrapper {
    width: 500px;
  }

  .md-device > a {
    width: 100%;
  }

}




